<template>
  <div id="order" class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="goAdd"
    >
      {{ $t('添加') }}
    </el-button>

    <BaseTable
      :request="request"
      :params.sync="params"
      ref="baseTable"
      :is-request="false"
    >
      <el-table-column label="ID" prop="id" width="60px" />
      <el-table-column
        :label="$t('联系人')"
        prop="contacts_name"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('内容')"
        prop="content"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('手机号')"
        prop="phone"
        show-overflow-tooltip
      />
      <el-table-column :label="$t('状态')" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">{{ $t('未处理') }}</span>
          <span v-if="scope.row.status == 2">{{ $t('已跟进') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="客户名称" prop="company_name" show-overflow-tooltip />
      <el-table-column label="公司地址" prop="company_address" show-overflow-tooltip />
      <el-table-column label="微信" prop="wechat" show-overflow-tooltip />
      <el-table-column label="邮箱" prop="email" show-overflow-tooltip />
      <el-table-column label="QQ" prop="qq" show-overflow-tooltip />
      <el-table-column label="企业网址" prop="company_site" show-overflow-tooltip />
      <el-table-column label="询盘来源" prop="referer" show-overflow-tooltip />
      <el-table-column label="来源网址" prop="referer_web" show-overflow-tooltip />
      <el-table-column label="预算金额" prop="expect_amount" show-overflow-tooltip />
      <el-table-column label="需求说明" prop="explain" show-overflow-tooltip />
      <el-table-column :label="$t('固定电话')" prop="telphone" show-overflow-tooltip /> -->
      <el-table-column
        :label="$t('操作')"
        width="100px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="check(scope.row)">查看模型字段</el-button> -->
          <EditBtn @click="editor(scope.row)" />
          <DelBtn
            @success="del(scope.row)"
            :tips="$t('放入回收站')"
            :confirm-content="$t('此操作将该询盘信息放入回收站')"
          />
        </template>
      </el-table-column>
    </BaseTable>

    <BaseDialog
      :title="addForm.id ? this.$t('编辑') : this.$t('添加')"
      :dialog-show.sync="dialogShow"
      width="80%"
      footer
      class=""
      @submit="submit"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-position="top"
        class="addForm"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :label="$t('询盘类型')" prop="inquiry_type">
              <el-select v-model="addForm.inquiry_type">
                <el-option
                  v-for="item in inquiryCate"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('询盘内容')" prop="content">
              <el-input v-model="addForm.content" type="textarea" />
            </el-form-item>
            <el-form-item :label="$t('联系人')" prop="contacts_name">
              <el-input v-model="addForm.contacts_name" />
            </el-form-item>
            <el-form-item :label="$t('手机号')" prop="phone">
              <el-input v-model="addForm.phone" />
            </el-form-item>
            <el-form-item :label="$t('固定电话')" prop="telphone">
              <el-input v-model="addForm.telphone" />
            </el-form-item>
            <el-form-item :label="$t('微信')" prop="wechat">
              <el-input v-model="addForm.wechat" />
            </el-form-item>
            <el-form-item :label="$t('邮箱')" prop="email">
              <el-input v-model="addForm.email" />
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
              <el-input v-model="addForm.qq" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('状态')">
              <el-select v-model="addForm.status">
                <el-option :label="$t('未处理')" :value="1" />
                <el-option :label="$t('已处理')" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('需求说明')" prop="explain">
              <el-input v-model="addForm.explain" type="textarea" />
            </el-form-item>
            <el-form-item :label="$t('预算金额')" prop="expect_amount">
              <el-input v-model="addForm.expect_amount" />
            </el-form-item>
            <el-form-item :label="$t('客户名称')" prop="company_name">
              <el-input v-model="addForm.company_name" />
            </el-form-item>
            <el-form-item :label="$t('公司地址')" prop="company_address">
              <el-input v-model="addForm.company_address" />
            </el-form-item>
            <el-form-item :label="$t('企业网址')" prop="company_site">
              <el-input v-model="addForm.company_site" />
            </el-form-item>
            <el-form-item :label="$t('询盘来源')" prop="referer">
              <el-input v-model="addForm.referer" />
            </el-form-item>
            <el-form-item :label="$t('来源网址')" prop="referer_web">
              <el-input v-model="addForm.referer_web" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import inquiryApi from '@/api/inquiry.js'
export default {
  data() {
    return {
      request: inquiryApi.inquiryList,
      params: {
        website_id: ''
      },
      orderData: [], //
      dialogShow: false,
      addForm: {
        website_id: '',
        inquiry_type: '',
        contacts_name: '',
        content: '',
        wechat: '',
        email: '',
        telphone: '',
        phone: '',
        qq: '',
        id: '',
        status: '',
        company_name: '',
        company_address: '',
        company_site: '',
        referer: '',
        referer_web: '',
        expect_amount: '',
        explain: ''
      },
      rules: {
        content: [
          {
            required: 'true',
            message: this.$t('请输入询盘内容'),
            trigger: 'blur'
          }
        ],
        inquiry_type: [
          {
            required: 'true',
            message: this.$t('选择询盘分类'),
            trigger: 'blur'
          }
        ]
      },
      searchForm: {
        title: ''
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {},
      id: '',
      siteId: '',
      inquiryCate: '' // 询盘分类
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1: {
      handler(val, value) {
        if (val) {
          this.siteId = this.$store.getters.siteId
          this.params.website_id = val
          this.addForm.website_id = val
          this.$nextTick(() => {
            this.getList('search')
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.getCateList()
  },

  methods: {
    // disableUser(row) {
    //   const val = {
    //     website_id: this.$store.getters.siteId,
    //     inquiry_category_id: row.inquiry_category_id,
    //     contact_name: row.contact_name,
    //     content: row.content,
    //     wechat: row.wechat,
    //     email: row.email,
    //     mobile: row.mobile,
    //     qq: row.qq,
    //     id: row.id,
    //     status: ''
    //   }
    //   if (row.status == 1) {
    //     val.status = 1
    //   } else {
    //     val.status = 2
    //   }
    //   inquiryApi.inquiryUpdate(val).then(res => {
    //     if (res.code == 0) {
    //       this.$message.success(res.msg)
    //     }
    //   })
    // },
    // 询盘分类列表
    getCateList() {
      // this.val.page = this.page.currentPage
      // this.val.limit = this.page.size
      // this.val.title = this.searchForm.title
      inquiryApi.inquiryCategoryList(this.val).then(res => {
        this.inquiryCate = res.data
      })
    },
    // 新增
    goAdd() {
      this.addForm = {
        website_id: this.$store.getters.siteId,
        inquiry_type: 1,
        contacts_name: '',
        content: '',
        wechat: '',
        email: '',
        telphone: '',
        phone: '',
        qq: '',
        id: '',
        status: 2,
        company_name: '',
        company_address: '',
        company_site: '',
        referer: '',
        referer_web: '',
        expect_amount: '',
        explain: ''
      }

      this.dialogShow = true
    },
    // 编辑
    editor(row) {
      // return
      // this.id = row.id
      this.addForm = {
        website_id: row.website_id,
        inquiry_type: row.inquiry_type * 1,
        contacts_name: row.contacts_name,
        content: row.content,
        wechat: row.wechat,
        email: row.email,
        telphone: row.telphone,
        phone: row.phone,
        qq: row.qq,
        status: row.status,
        company_name: row.company_name,
        company_address: row.company_address,
        company_site: row.company_site,
        referer: row.referer,
        referer_web: row.referer_web,
        expect_amount: row.expect_amount,
        explain: row.explain,
        id: row.id
      }
      this.getInfo(row.id)
    },
    // 获取询盘详情
    getInfo(val) {
      inquiryApi.inquiryInfo({ id: val }).then(res => {
        // this.addForm = res.data
        this.dialogShow = true
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addForm.website_id = this.$store.getters.siteId
          if (!this.addForm.id) {
            inquiryApi.inquirySave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList('search')
              }
            })
          } else {
            inquiryApi.inquiryUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },

    // 查看模型字段列表
    // check(row) {
    //   this.$router.push({ name: 'modelField', query: { id: row.id }})
    // },
    // 删除
    del(row) {
      inquiryApi.inquiryDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList('search')
        }
      })
    },
    // 询盘列表
    getList(type) {
      this.$refs.baseTable.getList(type)
      // this.val.page = this.page.currentPage
      // this.val.limit = this.page.size
      // this.val.website_id = this.$store.getters.siteId
      // // this.val.title = this.searchForm.title
      // if (this.val.website_id) {
      //   inquiryApi.inquiryList(this.val).then(res => {
      //     if (res.code == 0) {
      //       this.orderData = res.data
      //       this.page.total = res.count
      //     }
      //   })
      // }
    }
  }
}
</script>
<style scoped lang="scss">
.addForm ::v-deep {
  .el-form-item__content {
    width: calc(100% - 60px);
  }
}
.addForm {
  .el-select {
    width: 100%;
  }
}
.el-table {
  margin-bottom: 20px;
}
.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}
.el-form-item {
  width: 100%;
  margin-bottom: 0px;
}
.btn {
  margin-top: 20px;
}
</style>
